<template>
  <div>
    <div class="header-wrap">
      <el-menu
        :default-active="activeIndex"
        style="padding-left: 15%"
        background-color="deepskyblue"
        mode="horizontal"
        text-color="#fff"
      >
        <el-menu-item index="1"
          ><router-link :to="{ name: 'ClubIndex' }" tag="div"
            >首页</router-link
          ></el-menu-item
        >
        <el-menu-item index="2"
          ><router-link :to="{ name: 'ClubShow' }" tag="div"
            >社团展示</router-link
          ></el-menu-item
        >
        <el-submenu index="3">
          <template slot="title"> 社团快讯 </template>
          <el-menu-item index="3-1"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              tag="div"
              >重要通知</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-2"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 2 } }"
              tag="div"
              >社团要闻</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-3"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              tag="div"
              >重要通知</router-link
            ></el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> 社团风采 </template>
          <el-menu-item index="4-1"
            ><router-link
              :to="{ name: 'ActivityList', query: { typeId: 1 } }"
              tag="div"
              >活动预告</router-link
            ></el-menu-item
          >
          <el-menu-item index="4-2"
            ><router-link
              :to="{ name: 'ActivityList', query: { typeId: 2 } }"
              tag="div"
              >精彩活动回顾</router-link
            ></el-menu-item
          >
        </el-submenu>
        <el-menu-item index="5">
          <router-link :to="{ name: 'ApplicationResult' }" tag="div"
            >个人申请查询</router-link
          >
        </el-menu-item>
        <!--     头像-->

        <div class="right-menu" style="margin-left: 80%">
          <el-dropdown style="">
            <span class="el-dropdown-link">
              <el-avatar :src="this.photo"></el-avatar>
              <span class="name">{{ this.username }}，你好</span>
            </span>
            <el-dropdown-menu style="">
              <el-dropdown-item>
                <span class="no-underline" @click="skip()">个人信息</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="logout" class="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </div>
    申请的社团
    <div style="padding-top: 100px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="100px">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="200px">
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="200px">
        </el-table-column>
        <el-table-column prop="clubName" label="申请社团" width="200px">
        </el-table-column>
        <el-table-column prop="applicationDate" label="申请时间" width="200">
        </el-table-column>
        <el-table-column prop="appStatus" label="申请状态" width="200">
          <template scope="scope">
            <span v-if="scope.row.appStatus == 2" style="color: #e0cd71"
              >等待审核</span
            >
            <span v-if="scope.row.appStatus == 0" style="color: red"
              >申请失败</span
            >
            <span v-if="scope.row.appStatus == 1" style="color: #37b328"
              >申请成功</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 获取token并解析
import router from '@/router'
import decodedToken from '@/api/tokenDecode'
import request from '@/api/request'
export default {
  data() {
    return {
      photo: decodedToken().claims.photo,

      tableData: [
        {
          username: decodedToken().claims.username,
          nickname: decodedToken().claims.nickname,
          clubName: '',
          appStatus: '',
          applicationDate: '',
        },
      ],
    }
  },
  methods: {
    //判断跳转页面
    skip() {
      if (decodedToken().claims.is_president === '是') {
        router.push('/PresidentHome')
      } else {
        router.push('/UserHome')
      }
    },

    //获取申请社团结果
    getApplyResult() {
      request
        .get('/student/applyrecords')
        .then((res) => {
          if (res.code === 200) {
            this.tableData[0].appStatus = res.data.appStatus
            this.tableData[0].clubName = res.data.clubName
            this.tableData[0].applicationDate = res.data.applicationDate
          }
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    logout() {
      //清空session
      localStorage.clear()
      router.push('/login')
    },
  },
  created() {
    this.getApplyResult()
  },
}
</script>

<style scoped>
.header-wrap {
  background-color: deepskyblue;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
}
.phone-nav {
  display: none;
}
.header {
  width: 1024px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
}

.el-menu.el-menu--horizontal a {
  color: #fff;
}
.rightMenu {
  float: right;
  height: 70px;
  line-height: 70px;
  background-color: #000000;
}
a {
  text-decoration: none;
  color: #eee;
  font-size: 16px;
}

/*用户名*/
.right-menu .name {
  margin-left: 20px;
  color: #eee;
}

/* 去掉router-link下划线 */
.no-underline {
  text-decoration: none;
  color: inherit; /* 保持原本的文字颜色 */
}
</style>
